

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习2</title>
		<!-- 样式 -->
		<style type="text/css">
			html,div,ul,li {margin: 0px;padding: 0px;}
			a{cursor: pointer;}
			li {list-style: none;cursor: pointer;}
			fieldset {border: #000 1px dashed;width: 225px;height: 225px;padding: 10px;text-align: center;float: left;margin-left: 5px;}
			#cont_left {width: 300px;height: 500px;float: left;}
			#cont_right {float: left;}
			.newcss1{background-color: yellowgreen;}
		</style>
	</head>
	<body>
		<div id="cont_left">
			<!-- 左边文字部分 -->
			<!-- part1 -->
			<ul><img src="img/fold.gif"><a onclick="show('menu1')">通过DOM获取信息</a>
				<ul id="menu1">
					<!-- 点击showImg获取原始图片路径 -->
					<li onclick="showImg()"><img src="img/doc.gif">获取原始图片路径</li>
					<!-- 点击getFruit获取我喜欢的水果 -->
					<li onclick="getFruit()"><img src="img/doc.gif">获取我喜欢的水果</li>
				</ul>
			</ul>
			<!-- part2 -->
			<ul><img src="img/fold.gif"><a onclick="show('menu2')"> 通过DOM操作元素 </a>
				<ul id="menu2">
					<li onclick="createImg()"><img src="img/doc.gif">创建图片</li>
					<li onclick="cloneImg()"><img src="img/doc.gif">克隆图片</li>
					<li onclick="changeImg()"><img src="img/doc.gif">改变图片</li>
					<li onclick="removeImg()"><img src="img/doc.gif">删除图片</li>
				</ul>
			</ul>
			<!-- part3 -->
			<ul><img src="img/fold.gif"><a onclick="show('menu3')"> 通过DOM操作样式 </a>
				<ul id="menu3">
					<li onclick="changeCss1()"><img src="img/doc.gif">为原始图片加上行间样式</li>
					<li onclick="changeCss2()"><img src="img/doc.gif">为所有的fieldset加上内部样式</li>
				</ul>
			</ul>
		</div>
		<fieldset>
			<legend>原始图片</legend>
			<img id="fruit" src="img/fruit.jpg">
		</fieldset>
		<fieldset>
			<legend>图片路径</legend>
			<img id="msg1" src="img/fruit.jpg">
		</fieldset>
		<fieldset>
			<legend>选择你喜欢的水果</legend>
			<ul style="text-align: left;">
				<li>
					<input name="enjoy" type="checkbox" value="苹果" />苹果
				</li>
				<li>
					
					<input name="enjoy" type="checkbox" value="香蕉" checked="checked" />香蕉
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="葡萄" />葡萄
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="梨" checked="checked" />梨
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="西瓜" />西瓜
				</li>
			</ul>
			<div id="msg2" style="margin-top: 10px;text-align: left;"></div>
		</fieldset>
		<fieldset>
			<!-- 创建图片部分 -->
			<legend>创建图片</legend>
			<div id="msg3"></div>
		</fieldset>
		<fieldset>
			<legend>克隆图片</legend>
			<div id="msg4"></div>
		</fieldset>
		<script>
			//菜单收缩与扩展
			function show(title) {//
				// 查找元素 ID为title
				let currentMenu = document.getElementById(title);
				// 修改其样式为display
				let currentStatus = currentMenu.style.display;
				currentMenu.style.display = currentStatus == "" ? "none" : "";
			}

			//获取原始图片路径
			function showImg(){//
				const displayRoute = document.querySelector('#msg1');
				displayRoute.innerHTML = originalImg.getAttribute("src");
			}
			
			//获取喜欢的水果
		    function getFruit() {
				const fruits = document.querySelectorAll("input");
				//获取文档中 id="msg2" 的元素：
				const myFruits = document.querySelector('#msg2');
				let str = "你最喜欢的水果是:";
				// 循环遍历
				for (let i = 0; i < fruits.length; i++) {
					fruits[i].checked ? str += ` ${fruits[i].value}` : '';
					myFruits.innerHTML = str;
					fruits[i].addEventListener("change", () => {
					let str = "你最喜欢的水果是:";
					fruits.forEach(item => {
						item.checked ? str += ` ${item.value}` : '';
						myFruits.innerHTML = str;
					})
				})
			}
		}
			//创建图片 createImg();
			function createImg() {//
				// 找到ID为mgs3的节点
				createImg = document.querySelector('#msg3');
				//获取msg3 img
				if (document.querySelector('#msg3 img')) return;
				//createElement() 方法通过指定名称创建一个元素（img）
					newImg = document.createElement('img');
					newImg.setAttribute('src', 'img/fruit.jpg',);
					createImg.appendChild(newImg);
			}

			//克隆图片 cloneNode(); appendChild();添加末尾
			function cloneImg() {
				let  fruit =document.getElementById("fruit");
				//获取msg4
				const newImg = document.querySelector("#msg4");
				let newnode=fruit.cloneNode(true);
				newImg.appendChild(newnode);
			}
			//改变图片
			function changeImg() {//
				originalImg.setAttribute('src', 'img/watermelon.jpg');
				originalImg.style.width = '100%';
				originalImg.style.height = '100%';
			}
			//删除图片
			function removeImg() {//
				let fruit=document.getElementById("fruit");
				fruit.parentNode.removeChild(fruit);
			}
			//操作样式1
			function changeCss1() {
				const fieldsets = document.querySelectorAll("fieldset");
				originalImg.style.border = `5px solid red`;
			}
			//操作样式2
			function changeCss2() {//
				const fieldsets = document.querySelectorAll("fieldset");
				fieldsets.forEach(item => {
					item.style.backgroundColor = 'rgb(100,200,50)';
				})
			}
		</script>
	</body>
</html>

	
	
		